import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-abnormal-chart',
  templateUrl: './abnormal-chart.component.html',
  styleUrls: ['./abnormal-chart.component.less']
})
export class AbnormalChartComponent implements OnInit {

  abnormal_form!: FormGroup
  constructor() { }

  option1 = {
    color: ['#ffff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      show: true,
      bottom: '0',
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: '8%',
      right: '6%',
      bottom: '6%',
      containLabel: true,
      borderColor: '#fff',
      borderWidth: 1
    },
    xAxis: [
      {
        type: 'category',
        data: ['光达', '火车南站', '沙湾公园', '长沙大道', '人民东路', '锦泰广场', '长沙火车站'],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '##434454'
          }
        },
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#363742'
          }
        },
        axisLabel: {

          color: '#ffffff'

        }
      }
    ],
    series: [
      {
        name: '报警统计',
        type: 'bar',
        barWidth: '30%',
        data: [120, 132, 101, 134, 90, 230, 210]
      }
    ]
  };
  option2 = {
    color: ['#c23531'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      show: true,
      bottom: '0',
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: '8%',
      right: '6%',
      bottom: '6%',
      containLabel: true,
      borderColor: '#fff',
      borderWidth: 1
    },
    xAxis: [
      {
        type: 'category',
        data:
          ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '##434454'
          }
        },
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#363742'
          }
        },
        axisLabel: {

          color: '#ffffff'

        }
      }
    ],
    series: [
      {
        name: '报警统计',
        type: 'bar',
        barWidth: '30%',
        data: [20, 32, 10, 14, 9, 30, 10]
      }
    ]
  }

  ngOnInit(): void {
  }

  handleQuery(): void { // 查询

  }


}
